<script setup>
import { ref, watch, onMounted } from "vue";
import { usePaintingStore } from "@/store";

const props = defineProps({
  show: Boolean,
  id: Number,
});
let paintId = ref(0);
const emit = defineEmits(["update:show"]);

const paintingStore = usePaintingStore();
const list = ref([]);
onMounted(() => {
  paintId.value = uni.getStorageSync('paint').id;
  getHistoryList();
})
watch(
  () => [props.show, props.id],
  (e) => {
    getHistoryList();

  },
  { deep: true }
);
const getHistoryList = () => {
  switch (paintId.value) {
    case 38:
      list.value = uni.getStorageSync("textCreateImgHistory");
      break;
    case 45:
      list.value = uni.getStorageSync("createBgcHistory");
      break;
    case 46:
      list.value = uni.getStorageSync("createBgcV2History");
      break;
    case 48:
      list.value = uni.getStorageSync("vipCreateBgcHistory");
      break;
    case 49:
      list.value = uni.getStorageSync("commandCreateBgcHistory");
      break;
    default:
      list.value = [];
  }
}
const hideMask = () => {
  emit("update:show", false);
};

const queryTest = (e) => {
  let prompt = '', promptObj = {};
  paintId.value === 38 && (paintingStore.textCreateImageObj.prompt = e);

  // if (props.id == 45) {
  if (e && e.obj) { // 兼容老数据
    prompt = e.prompt || e.text
    promptObj = e.obj;
  } else {
    prompt = e;
    promptObj = {
      scne: e
    }

  }
  switch (paintId.value) {
    case 38:
      paintingStore.textCreateImageObj.prompt = prompt;
      paintingStore.textCreateImageObj.promptObj = promptObj;
      break;
    case 45:
      paintingStore.generationBgc.prompt = prompt;
      paintingStore.generationBgc.promptObj = promptObj;
      break;
    case 46:
      paintingStore.generationBgcV2.prompt = prompt;
      paintingStore.generationBgcV2.promptObj = promptObj;
      break;
    case 48:
      paintingStore.vipGenerationBgc.prompt = prompt;
      paintingStore.vipGenerationBgc.promptObj = promptObj;
      break;
    case 49:
      paintingStore.commandGenerationBgc.prompt = prompt;
      paintingStore.commandGenerationBgc.promptObj = promptObj;
      break;

  }

  emit("update:show", false);

};

const delText = (i) => {
  list.value.splice(i, 1);
  paintId.value === 38 && uni.setStorageSync("textCreateImgHistory", list.value);
  paintId.value === 45 && uni.setStorageSync("createBgcHistory", list.value);
  paintId.value === 46 && uni.setStorageSync("createBgcV2History", list.value);
  paintId.value === 48 && uni.setStorageSync("vipCreateBgcHistory", list.value);
  paintId.value === 49 && uni.setStorageSync("commandCreateBgcHistory", list.value);

};
</script>

<template>
  <!-- list.value:{{ list }}
  id:{{ id }} -->
  <scroll-view scroll-y class="selectHistory" :class="{ active: show }" @click.stop="">
    <div style="margin: 22rpx 22rpx 22rpx" v-if="list.length !== 0">
      <div class="cell" v-for="(item, index) of list">
        <div class="text" @click="queryTest(item)">{{ item && item.obj ? item.text : item }}</div>
        <van-icon name="cross" @click="delText(index)" />
      </div>
    </div>
    <div v-else class="imgBox">
      <img class="noData" src="@/draw/assets/暂无数据.png" mode="aspectFill" />
    </div>
  </scroll-view>
  <div v-if="show" class="mask" @click="hideMask"></div>
</template>

<style lang="less" scoped>
.selectHistory {
  box-sizing: border-box;
  width: 690rpx;
  // height: 348rpx;
  height: 0;
  background: var(--a-main-box-bg-color);
  border-radius: 24rpx;
  position: relative;
  z-index: 1200;
  transition: all 0.6s;

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }

  .cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--a-one-text-color);
    position: relative;
    font-size: 28rpx;
    margin-top: 40rpx;

    .text {
      width: 570rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:first-child {
      margin-top: 0;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: -18rpx;
      left: 0;
      width: 100%;
      height: 1rpx;
      background: #5d5a82;
    }
  }

  .imgBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .noData {
    display: block;
    width: 270rpx;
    height: 270rpx;
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 1000;
}

.active {
  height: 460rpx;
}
</style>
